<template>
  <section>
    <van-nav-bar title="申请列表"
                 fixed
                 placeholder
                 left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"
                 safe-area-inset-top/>
  </section>


  <section>
    <van-cell-group >
      <van-cell
          v-for="item of applyFriendList"
          :key="item.id"
          center
          :title="item.userId"
          :label="item.userName" >
        <template #value>
          <span v-if="!item.friendStatus" @click="editApply(item)" style="color: green">{{item.friendStatusText}}</span>
          <span v-if="item.friendStatus" >{{item.friendStatusText}}</span>
        </template>
      </van-cell>
    </van-cell-group>
  </section>

</template>

<script setup>

import {onMounted, ref} from "vue";
import {applyList,editFriendApply} from "@/network/friend";
import { showConfirmDialog } from 'vant';
const applyFriendList = ref()

function onClickLeft() {
  history.back();
}
function editApply(row) {
  console.log(row);
  let data = {
    id: row.id,
    friendStatus: null,
  }
  showConfirmDialog({
    title: '好友申请',
    confirmButtonText: '同意',
    cancelButtonText: '拒绝',
    message:
        '是否同意'+ row.userName +'的好友请求',
  })
      .then(() => {
        // 同意
        data.friendStatus = 1
      })
      .catch(() => {
        // 拒绝
        data.friendStatus = 2
      }).finally(() => {
    editFriendApply(data).then(() => {
      findApplyList()
    })
  });



}
function findApplyList() {
  applyList().then(res => {
    applyFriendList.value = res.data
  })
}
onMounted(() => {
  findApplyList()
});
</script>

<style scoped lang="scss">

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
